<template>
    <div class="page">
        <div class="top">
            <form action="/">
                <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel" />
            </form>
        </div>
        <div class="body">
            <div class="s"><span>分类搜索</span></div>
            <van-grid :column-num="3">
                <van-grid-item icon="photo-o" text="图文" v-on:click="dian_wo()" />
                <van-grid-item icon="video-o" text="视频" />
                <van-grid-item icon="edit" text="手工圈" />
                <van-grid-item icon="shop-o" text="商品" />
                <van-grid-item icon="contact" text="用户" />
            </van-grid>
        </div>
        
        <div class="bottom">
            <div class="sx">
                <span>历史搜索</span>             
            </div>
            <div class="dsx" @click="delete_fn()">
                <van-icon name="delete-o" size="20" color="#cacaca"/>
            </div>
        </div> 
        <div class="hang">
            <div class="biaoqian">dd</div>
            <div class="biaoqian">dd</div>
            <div class="biaoqian">dd</div>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { Toast } from 'vant';
import { useRouter, useRoute, RouterLink } from 'vue-router'
import { ref, reactive } from 'vue'
const router = useRouter()
const route = useRoute()
const value = ref('');
const onSearch = (val: any) => console.log(val);
// const onCancel = () => Toast('取消');
function onCancel(){
    router.go(-1)
}

function dian_wo(){
    router.push({
        name: 'search_x',   
    })   
}

function delete_fn(){
    console.log(11111);
    
}
</script>
    
<style scoped>
.page {
    height: 100vh;
    width: 100vw;
}

.s,.sx{
    padding: 10px 0px 0px 10px;
    color: #b2b2b2;
}
.sx{
    flex: 1;
}
.dsx{
    /* border: 1px solid green; */
    padding: 10px 10px 0px 0px;
}
.bottom{
    display: flex;
}
.hang{
    display: flex;
    margin: 10px;
}
.biaoqian{
    padding: 5px;
    background-color: #f4f4f4;
    margin: 0px 5px 0px 5px;
    border-radius: 5px;
}
</style>